<!--
 * @Author: LiuYan
 * @Date: 2022-09-02 10:12:31
 * @LastEditors: LiuYan
 * @LastEditTime: 2022-10-28 22:27:21
 * @Description: 高德地图
-->
<template>
  <div class="a-map">
    <div id="container" style="width: 100vw; height: 100vh" />
  </div>
</template>
<script setup>
import { onBeforeUnmount, reactive } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import * as app from "../config/index";
const { APP } = app.default;
class Map {
  constructor() {
    this.defaultMapConfig = {
      zoom: 18, // 级别
      center: [120.209741, 30.246767], // 中心点坐标，杭州萧山分局[120.272037, 30.13913]
      viewMode: "3D", // 使用3D视图 要和pitch:75（地图俯仰角度，有效范围 0 度- 83 度）配合使用
      pitch: 55,
      mapStyle: "amap://styles/b4add19512d57ff1d3545d65d05e03b6", // 设置地图的显示样式
    };
    this.map = null;
    this.infoWindow = null;
    this.data = reactive({
      extData: "",
    });
    // 是否渲染地图
    if (APP.isMap) this.initMap();
  }
  initMap() {
    AMapLoader.load({
      key: "f1eb6f022fe62b0a22b93cf26fc08b40", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        this.map = new AMap.Map("container", this.defaultMapConfig);
        this.mapClick();
        this.addMarker({ lngLat: [120.209741, 30.246767] });
      })
      .catch((e) => {});
  }
  //地图坐标点
  addMarker({ lngLat, extData, imgSrc, markerKey }) {
    let icon = null;
    if (imgSrc) {
      icon = new AMap.Icon({
        size: new AMap.Size(40, 40),
        // imageOffset: new AMap.Pixel(-10, -10),
        image: imgSrc || "",
        imageSize: new AMap.Size(40, 40),
      });
    }
    let marker = new AMap.Marker({
      position: new AMap.LngLat(lngLat[0], lngLat[1]),
      icon,
      extData,
    });
    marker.on(
      "click",
      function (evt) {
        this.data.extData = evt.target.getExtData();
        this.addInfoWindow(marker.getPosition());
      }.bind(this)
    );
    if (this[markerKey]) {
      this[markerKey].push(marker);
    }
    this.map.add(marker);
  }
  // 信息框
  addInfoWindow(position) {
    let content = this.createInfoWindow();
    this.map.clearInfoWindow();
    this.infoWindow = new AMap.InfoWindow({
      isCustom: true,
      content: content,
      offset: new AMap.Pixel(0, -30),
    });
    this.infoWindow.open(this.map, position);
  }
  //自定义窗口样式
  createInfoWindow() {
    const win = document.createElement("div");
    win.className = "test";
    win.innerHTML = "测试";
    return win;
  }
  mapClick() {
    this.map.on(
      "click",
      function (ev) {
        // 清楚所有信息框
        this.map.clearInfoWindow();
        // 触发事件的对象
        var target = ev.target;
        // 触发事件的地理坐标，AMap.LngLat 类型
        var lnglat = ev.lnglat;
        // 触发事件的像素坐标，AMap.Pixel 类型
        var pixel = ev.pixel;
        // 触发事件类型
        var type = ev.type;
        console.log(lnglat);
      }.bind(this)
    );
  }
}
let map = new Map();
onBeforeUnmount(() => {
  map = null;
});
</script>
<style lang="less" scoped></style>
